<template>
  <el-card shadow="never" class="h-full" :body-class="'main-card'">
    <div class="search" v-if="$slots.search">
      <slot name="search"></slot>
    </div>
    <div class="main-body">
      <slot name="table"></slot>
    </div>
    <div class="pagination" v-if="$slots.pagination">
      <slot name="pagination"></slot>
    </div>
  </el-card>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
:deep(.main-card) {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.search,
.pagination {
  flex-shrink: 0;
}

.pagination {
  margin-top: 10px;
}

.main-body {
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
</style>
